<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>模板语法</h2>
    <!-- 双大括号的文本插值 -->
    <!-- 双大括号的文本插值, 不仅可以写变量，还可以写表达式 -->
    <!-- 表达式：算式运算/三目运算/短路运算/对象和数组的点操作符/模板字符串 -->
    <p>msg: {{ msg }}</p>
    <p>count: {{ count + 1 }}</p>
    <p>done: {{ !done }}</p>
    <!-- 双大括号里面如果是undefined或者null，那么就不会有任何显示了 -->
    <p>unf: {{ unf }}</p>
    <p>nl: {{ nl }}</p>
    <!-- 双大括号里面如果是数组或者对象，那么对转成字符串再进行显示 -->
    <p>arr: {{ arr }}</p>
    <p>obj: {{ obj }}</p>


    <!-- <div>{{ content }}</div> -->
    <!-- v-html表示原始html的显示，可以将带标签的字符串，显示成标签的内容 -->
    <!-- 只能对信得过的内容使用，可能会造成xss攻击 -->
    <div v-html="content"></div>
  </div>

  <script src="../Vue.js"></script>
  <script>
    const { createApp } = Vue;

    createApp({
      // data选项里面放的是响应式数据
      // data的语法是一个函数，函数里面要return对象啊
      data() {
        return {
          msg: "hello Vue!",
          count: 5,
          done: false,
          unf: undefined,
          nl: null,
          arr: [1,2,3],
          obj: {a:3,b:4},

          content: "<div class=\"markdown-text\"><p><a href=\"https://registry.npmmirror.com\">https://registry.npmmirror.com</a> npmmirror 镜像站在2013年12月开始就使用基于 koa 的 <a href=\"https://github.com/cnpm/cnpmjs.org\">https://github.com/cnpm/cnpmjs.org</a> 私有 npm 应用搭建，这些年 node 应用框架在快速换代升级，连我们自己造的 egg 都要升级到 TypeScript 了，所以在 2021 年我们启动了 <a href=\"http://cnpmjs.org\">cnpmjs.org</a> 的技术升级重构，基于 egg 的 TypeScript 模式重新实现 <a href=\"https://github.com/cnpm/cnpmcore\">https://github.com/cnpm/cnpmcore</a> 。</p>\n<p>npm registry 的接口是 100% 实现迁移，然后在数据同步上通过数据库实现足够简单的任务系统，已经在 2022年1月30日完全老数据迁移。\n非常感谢阿里云这么多年来的对中国 npm 镜像云服务器的开源赞助，只能靠仅有的广告位和每年的感谢帖子来回报这份天价的云资源账单。这一次重构之后，我们验证下来至少可以节省一半的云服务器资源，也算是让阿里云的开源赞助可以减轻一些成本负担。</p>\n<p>当然 cnpmcore 不仅仅是为了技术升级，我们的核心新能力会跟随 npmfs 黑科技在 2022 年发布出来，到时候 npm install 的安装速度会在 cli 侧和 registry 侧同时发力，让 npm 模块安装速度在可预见的未来达到秒级。</p>\n<p>PS：预估你在此期间遇到包数据同步和丢失问题，请先手动同步一次，如果还是没有，请回帖反馈给我们。</p>\n</div>"
        }
      }
    }).mount("#app");
  </script>
</body>
</html>